
//導入Vue包
import Vue from 'vue'

//導入app組件
import app from './App.vue'

//导入vue-router包
import VueRouter from 'vue-router'
//手动安装路由
Vue.use(VueRouter)

//导入缩略图插件
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)

//导入视频插件 vue-video-player
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)


//導入Vue-resource包
import VueResource from 'vue-resource'
//手動安裝vue-resource
Vue.use(VueResource)

//导入vuex包
import Vuex from 'vuex'
//手动安装
Vue.use(Vuex)

//请求数据接口的跟路径
Vue.http.options.root='http://47.89.21.179:8080'

//配置全局post 时候数据格式组织形式
Vue.http.options.emulateJSON = true;


//导入时间格式化插件Moment 
import moment from 'moment'
//定义全局的时间格式化过滤器
Vue.filter('dateFormart',function (dateStr,pattern="YYYY-MM-DD HH:mm:ss"){
   return moment(dateStr).format(pattern)
})


//导入自己的路由模块router.js
import router from './router.js'

//导入Mint-UI组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

//按需导入Mint—UI组件
//import { Header } from 'mint-ui'
//Vue.component(Header.name, Header)

//導入MUI的樣式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'


//拿本地localStorage中的数据
var car=JSON.parse(localStorage.getItem('car')||'[]')

//创建vuex store 实例
const store=new Vuex.Store({
   state:{//调用 this.$store.state.***
      car:car//将购物车中的商品的数据，用一个数组存储起来，购物车中每个商品为一个对象{id:商品ID,count:商品数量,price:商品单价,selected:true}
   },
   mutations: {//调用 this.$store.commit('方法名称','按需传递唯一的参数')
      addToCar(state,goodsinfo){
         //1、如果购物车中有该商品，就改变该商品的数量就可以
         //2、如果没有就直接把商品加入购物车

         //假设购物车中没有对应的商品
         var flag=false

         state.car.some(item=>{
            if(item.id==goodsinfo.id){
               item.count+=parseInt(goodsinfo.count);
               flag=true;
               return true;
            }
         })

         if(!flag){
            state.car.push(goodsinfo);
         }

         //当更新 car 之后，把car 数组存储到本地
         localStorage.setItem('car',JSON.stringify(state.car))

      },
      updateGoodsInfo(state,goodsinfo){
         //修改购物车中的商品数量
         
         state.car.some(item=>{
            if(item.id==goodsinfo.id){
               item.count=parseInt(goodsinfo.count);
               return true;
            }
         })
         //把修改过得数据放到本地localStorage
         localStorage.setItem('car',JSON.stringify(state.car))
      },
      removeFromCar(state,id){
         //根据ID从store中的购物车删除对应的商品
         state.car.some((item,i)=>{
            if(item.id==id){
               state.car.splice(i,1);
               return true;
            }
         })
         //把最新的数据放到本地localStorage
         localStorage.setItem('car',JSON.stringify(state.car))
      },
      updateGoodsSelected(state,info){
         state.car.some(item=>{
            if(item.id==info.id){
               item.selected=info.selected;
            }
         })
         //把最新的数据放到本地localStorage
         localStorage.setItem('car',JSON.stringify(state.car))
      }
      
   },
   getters: {//调用 this.$store.getters.***
      //相当于计算属性
      getAllCount(state){
         var c=0;
         state.car.forEach(item=>{
            c+=item.count;
         })
         return c;
      },
      getGoodsCount(state){
         var o={};
         state.car.forEach(item=>{
            o[item.id]=item.count;
         })
         return o;
      },
      getGoodsSelected(state){
         var o={}
         state.car.forEach(item=>{
            o[item.id]=item.selected;
         })
         return o;

      },
      getGoodsCountAndAmount(state){
         var o={
            count:0,
            amount:0
         }
         state.car.forEach(item=>{
            if(item.selected){
               o.count+=item.count;
               o.amount+=item.price*item.count
            }
         })
         return o
      }
      
   }
})


//創建Vue對象
var vm = new Vue({
    el: '#app',
    //註冊組件
    render: c => c(app),
    router,//挂载路由对象
    store//挂载store
})